<template>
    <div class="bg-white flex flex-col">
        <com-sidebar />
        <com-header class="flex-none sticky top-0 left-0 z-999 shadow-md" />
        <!--横幅-->
        <!-- <el-carousel height="640px">
            <el-carousel-item v-for="item in bannerList" :key="item">
                <img class="w-full h-160" :src="item.url" :alt="item.alt">
            </el-carousel-item>
        </el-carousel> -->
        <el-carousel :height="autoHeight">
            <el-carousel-item v-for="item in bannerList" :key="item">
                <img :src="item.url" :alt="item.alt" width="100%">
            </el-carousel-item>
        </el-carousel>

        <!-- 公司简介 -->
        <div class="h-100 flex justify-center mt-6">
            <div class="w-1024px">
                <div>
                    <p class="py-10 flex justify-center">
                        <img class="h-15" src=" /static/logo2.png" alt="">
                    </p>
                    <p class="indent-lg text-gray-700">
                        “富邦行业保”是由富邦恒安与亚泰经纪联合创立的专业行业保险服务平台，主营企业险种包括：雇主责任险、建工团意险、家政服务险、工程一切险等，并提供保险资讯、保险咨询、风险评估、保险方案定制、在线投保、保单保全、协助理赔等闭环保险在线服务。
                    </p>
                    <p class="indent-lg mt-2 text-gray-700">
                        从2015年起一直深耕保险行业，8年的保险一线操作经验，汇聚了一大批优秀的保司公司、服务商等合作伙伴，目前已经联合行业大型保险公司（中国人保、中国太平洋、中国人寿、中国平安、安联财险等）实现了网上保险实时投保，打造互联网保险平台，突破地域，以实现足不出户的网上投保。
                    </p>
                </div>
            </div>
        </div>

        <!-- 横幅 -->
        <div class="h-30 flex justify-center items-center bg-fixed bg-center bg-cover"
            style="background-image: url('/static/bg3.png');">
            <div class="w-1024px flex justify-around">
                <div class="h-30 w-40 flex flex-col justify-center items-center text-gray-700" v-for="item in NumList">
                    <p class="text-2xl">{{ item.num }}</p>
                    <p class="text-lg">{{ item.text }}</p>
                </div>
            </div>
        </div>

        <!-- 我们的优势 -->
        <div class="h-100 flex justify-center mt-10">
            <div class="w-1024px">
                <p class="text-center text-3xl py-10">我们的优势</p>
                <div class="w-1024px flex justify-between items-center">
                    <div class="w-46 h-60 flex flex-col justify-center items-center"
                        v-for="(item, index) in advantageList" :key="indxe">
                        <img class="w-30 pb-6" :src="item.url">
                        <p class="text-red-500 text-lg">{{ item.title }}</p>
                        <p class="text-gray-600">{{ item.text }}</p>
                    </div>
                </div>
            </div>
        </div>


        <!-- 合作伙伴 -->
        <div class="h-140 flex justify-center bg-gray-100">
            <div class="w-1024px">
                <p class="text-center text-3xl mt-8 py-10">合作伙伴</p>
                <div class="flex justify-between flex-wrap">
                    <img class="w-40" v-for="(item, index) in partnerList" :key="index" :src="item" alt="">
                </div>
            </div>
        </div>

        <div class="h-50 flex justify-center items-center bg-red-700">
            <div class="w-1024px flex justify-between text-white">
                <div class="w-2/3">
                    <!-- <p class="text-3xl pb-6">富邦行业保</p> -->
                    <img class="w-206px py-6" src="/static/logo4.png" alt="">
                    <p>提供保险咨询/投保/方案配置/协助理赔等服务，已服务超20万人次，覆盖全国23个省市自治区</p>
                </div>
                <div class="flex justify-between text-center text-xs">
                    <div class="mr-6">
                        <img class="w-120px h-120px" src="/static/gzqrcode.png" alt="">
                        <p>关注公众号联系我们</p>
                    </div>
                    <div>
                        <img class="w-120px h-120px" src="/static/kfqrcode.png" alt="">
                        <p>微信扫码咨询</p>
                    </div>
                </div>
            </div>
        </div>

        <com-footer class="flex-none" />
    </div>
</template>

<script>
import header from "./header";
import footer from "./footer";

import sidebar from "./sidebar";

export default {
    components: {
        ComSidebar: sidebar,
        ComHeader: header,
        ComFooter: footer,
    },
    data() {
        return {
            active: 1,
            bannerList: [{ url: '/static/banner1.jpg', alt: '' }, { url: '/static/banner2.jpg', alt: '' }, { url: '/static/banner3.jpg', alt: '' }, { url: '/static/banner4.jpg', alt: '' }],
            partnerList: ['/static/partner/1.png', '/static/partner/2.png', '/static/partner/3.png', '/static/partner/4.png', '/static/partner/5.png', '/static/partner/6.png', '/static/partner/7.png', '/static/partner/8.png', '/static/partner/9.png', '/static/partner/10.png', '/static/partner/11.png', '/static/partner/12.png'],
            NumList: [{
                text: '覆盖23个省',
                num: '283个城市'
            }, {
                text: '工程师',
                num: '200,000+'
            }, {
                text: '网点',
                num: '30,000+'
            }],
            advantageList: [{
                title: '8年+',
                text: '深耕行业 八余载',
                url: '/static/advantage/1.png'
            }, {
                title: '性价比高',
                text: '独家引进 定制产品',
                url: '/static/advantage/2.png'
            }, {
                title: '轻松投保',
                text: '线上操作 简单方便',
                url: '/static/advantage/3.png'
            }, {
                title: '理赔无忧',
                text: '专业服务 理赔无忧',
                url: '/static/advantage/4.png'
            },]
        };
    },
    computed: {
        autoHeight() {
            let _w = document.documentElement.clientWidth || document.body.clientWidth;
            let _h = _w * 800 / 1920
            return _h + "px";
        }
    },
    async mounted() { 
    },
    methods: {

    },
};
</script>

<style scoped>
</style>